Hello，小可爱们，今天我们一起来区分一下伪类选择器跟伪元素选择器吧！

伪类选择器与伪元素选择器在名字上很相似，所以对于初学者来说，很容易混淆它们，区别不开，其实两者在作用上还是有本质的区别的，只要从作用上理解了，那我们也可以很容易的分辨出它们两种选择器了。

伪类选择器是用来向某些选择器来添加效果。

伪元素选择器则是用来将特殊的效果添加在选择器上。

其本质上在于是否创建了新的元素：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM。

身为程序猿的我们当然还需要通过代码的实现及演示来理解咯。所以接下来让我们来举例看一下他们的区别吧：

代码实现：

p

p p

如上述代码中存在两个a标签，如果我们想让第一个a标签给他设置宽高背景色为绿色，我们应该怎么做呢？

接下来，我们先通过伪类选择器进行修改：

如果我们不通过伪类选择器，那我们就需要给第一个a标签设置一个class或id名：

p

p p

运行结果：

                    ​​​​​​​        ​​​​​​​        ​​​​​​​        

 通过伪元素选择器进行修改时：

在此情况下如果不通过伪元素选择器呢？

p

p p

运行结果：

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

所以，通过上述的对比，我们很明显的可以看出伪类选择器与伪元素选择器的本质区别，伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构，创造出了一个虚拟的内容来辅助我们找到元素的位置，就像例子的span标签一样。

另外，伪类选择器在c3中使用一个冒号，而伪元素选择器可使用两个冒号或一个冒号，这也是平时我们可以区分的方法之一。

在分辨出两者的区别之后，来总结一下常用的伪类选择器跟伪元素选择器：

常见伪元素选择器：

::after

::before

::first-letter

::first-line

::selection

::placeholder

常见伪类选择器：

（1）结构伪类选择器：

        :first-child

        :last-child

        :nth-child(n)

        :nth-last-child(n)

        :first-of-type

        :last-of-type

        :nth-of-type(n)

        :nth-last-of-type(n)

        :only-child

        :only-of-type

        :root

        :empty

（2）反选伪类选择器：

        父元素 （空格） :not（标签名）

（3）目标伪类选择器：

        :target

（4）UI元素状态选择器：

        :enabled

        :disabled

        :checked

（5）动态伪类选择器：

        :link

        :visited

        :hover

        :active

（6）用户行为伪类选择器

        :focus